<template>
  <div class="content-header-with-title">
    <div class="title">{{ title }}</div>
    <div class="desc">
      {{ desc || `我们为您提供智能、高效、开放、安全的检测服务` }}
    </div>
  </div>
</template>

<script setup>
import { defineProps, toRefs } from 'vue'

const props = defineProps(['title', 'desc', 'bgName'])
const { title, desc, bgName } = toRefs(props)
console.log(bgName)
</script>

<style lang="scss" scoped>
.content-header-with-title {
  width: 100%;
  height: dpi(35rem);

  background: url('../assets/images/bg.jpg');
  background-size: cover;

  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-family: PingFangSC-Semibold;
    font-size: dpi(4rem);
    font-weight: normal;
    font-stretch: normal;
    line-height: dip(3rem);
    letter-spacing: 0rem;
    color: #ffffff;
    margin-top: dpi(8rem);
  }
  .desc {
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    font-weight: normal;
    font-stretch: normal;
    line-height: dpi(3rem);
    letter-spacing: 0rem;
    color: #7fcfe2;
    margin-top: dpi(3rem);
  }
}
</style>
